<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue2305/js/vue.js"></script>
    <!-- 引入 Bootstrap CSS -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div src="app">
        <div class="content">
            <h2 class="text-center">商品列表</h2>
            <product-list :products="products"></product-list>
        </div>


    </div>
    
    <!-- 定义商品列表组件模板 -->
     <template id="product-list-template">
        <div class="row">
            <product-item v-for="(product, index )in products" :product="product" :key="index"></product-item>
        </div>

     </template>

    <template id="product-item">
        <div class="col-md-4">
            <div class="class">
                <div class="card-body">
                    <h3 class="card-title">{{product.name}}</h3>
                    <p class="card-text">价格：${{product.price}}</p>
                    <p class="card-text">描述：{{ product.Description}}</p>
                </div>
            </div>
        </div>
    </template>

    <script type="text/javascript">

        Vue.component('product-item',{
            props:['product'],
            template:'#product-item-template'  
        });

// 定义商品列表组件
        Vue.component('product-list',{
            template:'#product-list-template',
            props:['products']
        });

        new Vue({
            el:'#app',
            data:{
                products: [
                    {
                        name: 'iPhone 15',
                        price: 999,
                        description: '最新款苹果手机，性能强劲'
                    },
                    {
                        name: 'MacBook Pro',
                        price: 1999,
                        description: '高性能笔记本电脑，适合专业人士'
                    },
                    {
                        name: 'AirPods Pro',
                        price: 399,
                        description: '最新款耳机，提供沉浸式音乐体验'
                    }
                ]
                  
            }
        });
    </script>
</body >
</html>